<template>
  <div class="demo-inner-divider">treeSelect 基础</div>
  <div class="explainText">基础用法：<span>最简单的用法，单选。</span></div>
  <e-treeSelect v-model="value" :data="data" v-width="200" />
  <div class="explainText">
    多选：<span>设置属性 multiple 可以开启多选的树选择。</span>
  </div>
  <e-treeSelect v-model="value1" multiple :data="data1" v-width="400" />
  <div class="explainText">
    可勾选：<span>设置属性 show-checkbox 可以对数据勾选，使用勾选必须开启属性
      multiple。</span
    >
  </div>
  <e-treeSelect
    v-model="value2"
    multiple
    show-checkbox
    :data="data2"
    v-width="400"
  />
  <div class="explainText">
    异步加载子节点：<span>设置属性 load-data 可以异步加载子节点，与 View UI Plus Tree
      的异步加载子节点方式相同。</span
    >
  </div>
  <e-treeSelect
    v-model="value3"
    multiple
    show-checkbox
    :load-data="loadData"
    :data="data3"
    v-width="400"
  />

  <treeSelect-md class="markdown-body"></treeSelect-md>
</template>
<script>
import treeSelectMd from '../../docs/treeSelect.md'
export default {
  name: 'DemoTree',
  components: {
    treeSelectMd,
  },
  data() {
    return {
      value: '',
      data: [
        {
          title: 'parent1',
          expand: true,
          value: 'parent1',
          selected: false,
          checked: false,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              value: 'parent1-1',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-1-1',
                  value: 'leaf1',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-1-2',
                  value: 'leaf2',
                  selected: false,
                  checked: false,
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              value: 'parent1-2',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf3',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf4',
                  selected: false,
                  checked: false,
                },
              ],
            },
          ],
        },
      ],
      value1: [],
      data1: [
        {
          title: 'parent1',
          expand: true,
          value: 'parent1',
          selected: false,
          checked: false,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              value: 'parent1-1',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-1-1',
                  value: 'leaf1',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-1-2',
                  value: 'leaf2',
                  selected: false,
                  checked: false,
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              value: 'parent1-2',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf3',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf4',
                  selected: false,
                  checked: false,
                },
              ],
            },
          ],
        },
      ],
      value2: [],
      data2: [
        {
          title: 'parent1',
          expand: true,
          value: 'parent1',
          selected: false,
          checked: false,
          children: [
            {
              title: 'parent 1-1',
              expand: true,
              value: 'parent1-1',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-1-1',
                  value: 'leaf1',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-1-2',
                  value: 'leaf2',
                  selected: false,
                  checked: false,
                },
              ],
            },
            {
              title: 'parent 1-2',
              expand: true,
              value: 'parent1-2',
              selected: false,
              checked: false,
              children: [
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf3',
                  selected: false,
                  checked: false,
                },
                {
                  title: 'leaf 1-2-1',
                  value: 'leaf4',
                  selected: false,
                  checked: false,
                },
              ],
            },
          ],
        },
      ],
      value3: [],
      nextValue: 1,
      data3: [
        {
          title: 'parent1',
          value: 'parent1',
          loading: false,
          selected: false,
          checked: false,
          children: [],
        },
      ],
    }
  },
  methods: {
    loadData(item, callback) {
      this.nextValue++
      setTimeout(() => {
        const data = [
          {
            title: 'children' + this.nextValue,
            value: 'children' + this.nextValue,
            loading: false,
            selected: false,
            checked: false,
            children: [],
          },
        ]
        callback(data)
      }, 1000)
    },
  },
}
</script>
<style>
.explainText {
  /* display: flex; */
  font-size: 14px;
  color: #9013fe;
  margin: 10px 0px;
}
.explainText > span {
  font-size: 14px;
  color: #6f7d96;
  padding-left: 10px;
}
.explainText > p {
  font-size: 14px;
  color: #6f7d96;
  padding-left: 10px;
}
.demo-tree .demo-button-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98, 54, 255, 1);
  width: 14rem;
  margin-bottom: 5px;
}
.render-wrapper .haloe-table-cell-tooltip-content {
  margin-right: 0px !important;
}
</style>
